<template>
    <van-nav-bar title="我的订单" left-text="" left-arrow @click-left="goBack" />
    <van-tabs v-model:active="status" @click-tab="getOrderData">
        <van-tab v-for="item in statuslist" :title="item.name" :name="item.id"></van-tab>
    </van-tabs>
    <van-card v-for="item in orderlist" :key="item.id" :price="item.amount" :desc="'商品名称:' + item.info.product.name"
        :title="'订单号:' + item.code" :thumb="item.info.product.thumb_text">
        <template #tags>
            <div>下单时间： 2024-05-24</div>
        </template>
        <template #num>
            <van-tag plain type="danger">{{ item.status_text }}</van-tag>
        </template>
        <template #footer>
            <van-button size="mini" type="primary" @click="toPages(item.id, '/business/order/info')">订单详情</van-button>
            <van-button size="mini" type="danger" v-if="item.status > 0 && item.status != '4'"
                @click="toPages(item.id, '/business/order/refund')">申请退货</van-button>
            <van-button size="mini" type="success" v-if="item.status == '2'"
                @click="Confirmreceipt(item.id)">确认收货</van-button>
            <van-button size="mini" type="success" v-if="item.status == '0'" @click="
        (show = true),
        (actions = [
            { name: '余额支付', id: 0, orderid: item.id },
            { name: '微信支付', id: 1, orderid: item.id },
            { name: '支付宝支付', id: 2, orderid: item.id },
        ])
        ">确认支付</van-button>
            <van-action-sheet v-model:show="show" :actions="actions" cancel-text="取消" close-on-click-action
                @select="onSelect" />
            <van-button size="mini" type="warning" v-if="item.status == '4'"
                @click="toPages(item.id, '/business/order/rateinfo')">评价详情 </van-button>
                <van-button size="mini" type="danger" v-if="item.status < '0'" @click="toPages(item.id, '/business/order/refundinfo')">退货详情</van-button>
            <van-button size="mini" type="primary" v-if="item.status == '-3' && !item.back_text" @click="toPages(item.id, '/business/order/refundgoods')">待退货 </van-button>
            <van-button size="mini" type="warning" v-if="item.status > '2' && item.expresscode"
                @click="toPages(item.id, '/business/order/express')">物流详情</van-button>
        </template>
    </van-card>

</template>
<script setup>

const goBack = () => {
    router.push('/business/base/index')
};
const router = useRouter();
const statuslist = [
    {
        id: '',
        name: '全部'
    },
    {
        id: '0',
        name: '待支付'
    },
    {
        id: '1',
        name: '待发货'
    },
    {
        id: '2',
        name: '待收货'
    },
    {
        id: '3',
        name: '待评价'
    },
    {
        id: '4',
        name: '已完结'
    },
    {
        id: '-1',
        name: '售后中'
    },
    {
        id: '-4',
        name: '售后已结'
    },
]
const status = ref('')
const orderlist = ref([])
const { cookies } = useCookies();
const LoginUser = reactive(cookies.get("LoginUser") ?? {});
onBeforeMount(() => {
    getOrderData()
})
const getOrderData = async () => {
    let result = await Api.orderIndex({
        busid: LoginUser.id,
        status: status.value
    });
    if (result.code == 1) {
        orderlist.value = result.data
    }
}
const toPages = (id, url) => {
    router.push({
        path: url,
        query: {
            orderid: id
        }
    })
}
const Confirmreceipt = (id) => {
    showConfirmDialog({
        message: "确认已经收到货物?",
    })
        .then(async () => {
            let result = await Api.orderReceipt({
                busid: LoginUser.id,
                orderid: id
            });
            if (result.code == 1) {
                getOrderData()
                showSuccessToast({
                    message: result.msg,
                });
            } else {
                showFailToast(result.msg);
            }
        })
        .catch(() => { });
}
const show = ref(false);
const orderid = ref(0);
const actions = ref([])
const onSelect = async (item) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    orderid.value = item.orderid;

    console.log(orderid.value);
    if (item.id == 0) {
        let result = await Api.orderPay({
            busid: LoginUser.id,
            orderid: orderid.value,
        });
        if (result.code == 1) {
            getOrderData();
            showSuccessToast(result.msg);
        } else {
        }
    }
};
</script>
<style>
.van-tabs__line{
    background: rgb(50, 128, 111);
}
</style>